import React from 'react';
import {Platform} from 'react-native';
import {
  Box,
  Button,
  Input,
  Pressable,
  Center,
  Text,
  extendTheme
} from 'native-base';
import Account_svg from '../public/icons/account';
import Password_svg from '../public/icons/eyes';
import LinearGradinet from 'react-native-linear-gradient';

function onFinish(_name, _pwd) {
  fetch('http://192.168.0.10:3000/login', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      Host: '192.168.0.10',
    },
    body: JSON.stringify({
      name: _name,
      pwd: _pwd,
    }),
  })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error));
}

const Login = () => {
  const [name, setName] = React.useState(''); // 替换为你的初始值或空字符串
  const [pwd, setPwd] = React.useState(''); // 替换为你的初始值或空字符串
  const [show, setShow] = React.useState(false);
  const [color1, setcolor1] = React.useState('#8a8a8a');
  const theme = extendTheme({
    colors: {
      // Add new color
      primary: {
        50: '#fff7ed',
        100: '#ffedd5',
        200: '#fed7aa',
        300: '#fdba74',
        400: '#fb923c',
        500: '#f97316',
        600: '#ea580c',
        700: '#c2410c',
        800: '#9a3412',
        900: '#7c2d12',
      },
      // Redefining only one shade, rest of the color will remain same.
      error: {
        400: '#d97706',
      },
    },
    config: {
      // Changing initialColorMode to 'dark'
      initialColorMode: 'dark',
    },
  });
  return (
    <Box flex={1}>
      <LinearGradinet colors={['#fdba74', '#fed7aa', '#fff7ed']} flex={1}>
        <Box flex={3}>
          <Center
            flex={1}
            justifyContent={'center'}
            alignItems={'center'}>
            <Text color={'white'} fontWeight={'bold'} fontSize={'4xl'} fontFamily={'Roboto-Medium'}>乒乓空间</Text>
          </Center>
        </Box>
        <Box flex={4}>
          <Box flex={4}>
            <Input
              theme={theme}
              variant="rounded"
              placeholder="请输入用户名"
              InputLeftElement={<Account_svg color={color1}></Account_svg>}
              marginX={10}
              marginBottom={5}
              onFocus={() => {
                setcolor1('#f87171');
              }}
              onBlur={() => {
                setcolor1('#8a8a8a');
              }}
              onChange={e => {
                setName(e.nativeEvent.text);
              }}
            />
            <Input
              theme={theme}
              variant="rounded"
              placeholder="请输入密码"
              type={show ? 'text' : 'password'}
              InputRightElement={
                <Pressable onPress={() => setShow(!show)}>
                  <Password_svg show={show}></Password_svg>
                </Pressable>
              }
              marginX={10}
              onChange={e => {
                setPwd(e.nativeEvent.text);
              }}
            />
          </Box>
          <Box flex={2}>
            <Button
            colorScheme="orange"
              marginX={20}
              onPress={() => {
                console.log(name, pwd);
                onFinish(name, pwd);
              }}>
              登录
            </Button>
          </Box>
          <Box flex={1} justifyContent={'flex-end'} alignItems={'center'}>
            <Box marginBottom={3} flexDirection={'row'}>
              <Text color={'#bfbfbf'}>忘记密码</Text>
              <Text color={'#bfbfbf'}>   |   </Text>
              <Text color={'#bfbfbf'}>注册账号</Text>
            </Box>
          </Box>
        </Box>
      </LinearGradinet>
    </Box>
  );
};
export default Login;
